<template>
<!-- 	@click 组件被点击  
	@longpress 长按（手指触摸超过350ms）  (微信小程序和H5)
	@longtap 长按  （支付宝小程序等）
	@tap 点击  
	@touchcancel 手指触摸被打断，如来电提醒，弹窗  
	@touchend 手指触摸动作结束，如松开按钮  
	@touchmove 手指触摸后移动  
	@touchstart 手指触摸动作开始 
	-->
	 
	<button :style="[ButtonStyle]" class="button u-reset-button " @longpress="onLongress" @touchend.stop="onTouchend" :class="ButtonClass" :hover-class="ButtonHoverClass" @tap.stop="onEmit">
		<template v-if="ShowIcon">
			<u-icon :name="icon" class="button-icon" :color="IconColor" size="28"></u-icon>
		</template>
		<slot></slot>
	</button>
</template>

<script>
	export default {
		props: {
			disabled: Boolean,
			plain: Boolean,
			size: {
				type: String,
				default: "large"
			},
			type: {
				type: String,
				default: 'default'
			},
			block: {
				type: Boolean,
				default: true
			},
			icon: {
				type: String,
				default: ''
			},
			borderStyle: {
				type: String,
				default: "solid"
			}
		},
		data() {
			return {
				isLongress:false,
				buttonBlock: {
					block: {
						width: '100%',
					},
					inline: {
						padding: '0  36rpx',
						display: 'inline-block'
					}
				}
			}
		},

		computed: {
			ButtonSizeClass() {
				return `button-size--${this.size}`
			},
			ButtonTypeClass() {
				let type = this.type;
				if (this.plain) {
					type = `${type}_plain`
				}
				return `button-type--${type}`
			},
			ButtonBorderStyleClass() {
				let type = this.borderStyle;
				return `button-border_${type}`
			},

			ButtonHoverClass() {
				let type = this.type
				if (this.plain) {
					type = `${type}_plain`
				}
				return `button-hover--${type}`
			},
			ButtonBlock() {
				let val = 'block'
				if (!this.block) {
					val = 'inline'
				}
				return this.buttonBlock[val]
			},

			ButtonClass() {
				return [this.ButtonSizeClass, this.ButtonTypeClass, this.ButtonBorderStyleClass]
			},
			ButtonStyle() {
				return {
					...this.ButtonBlock,
				}
			},
			ShowIcon() {
				return this.icon != ''
			},
			IconColor() {
				let buttonType = {
					// default: '#409EFF',
					default: '#fff',
					defaultPlain: '#409EFF',
					info: '#000000'
				}
				let type = this.type;
				if (this.plain) {
					type = `${type}Plain`
				}

				return buttonType[type]
			}

		},
		methods: {
			onLongress(){
				if (this.disabled) {
					return
				}
				this.isLongress = true
				this.$emit('longress')
			},
			onTouchend(){ 
					this.$emit('touchend')	
			},
			onEmit() {
				if (this.disabled || this.isLongress) {
					return
				}
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button {
		&-icon {
			margin-right: 12rpx;
		}

		&-boder {
			&_dashed {
				border-style: dashed !important;
				background-color: transparent !important;
			}
		}

		&-size {
			&--small {
				font-size: 28rpx;
				height: 64prx;
				line-height: 64rpx;
				border-radius: 34rpx;
			}

			&--medium {}

			&--large {
				font-size: 32rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
			}
		}

		&-hover {
			&--default {
				background-color: #3686D9 !important;
				color: #fff !important;

				&_plain {
					background-color: #409EFF !important;
					color: #fff !important;
				}
			}

			&--info {
				background-color: #ccc !important;

				&_plain {
					background-color: #fff !important;
					border-color: #409EFF !important;
					color: #409EFF !important;
				}
			}
		}


		&-type {
			&--default {
				border: none;
				background-color: #409EFF;
				color: #fff;

				&_plain {
					background-color: #FFFEFE;
					color: #409EFF;
					border-width: 2rpx;
					border-style: solid;
					border-color: #409EFF;
				}
			}

			&--info {
				border: none;
				background-color: #EDEFF2;
				color: #909399;

				&_plain {
					background-color: #FFFEFE;
					color: #0F2E4D;
					border-width: 2rpx;
					border-style: solid;
					border-color: #DEE2EE;
				}

			}
		}



	}
</style>
